<!-- 
  udate_time: 2023-08-02
  description: amap使用该组件
  note:
    1. task列表仅支持搜索，不支持排序
 -->
<template>
  <div class="amap-table">
    <el-table class="inside-el-table" ref="detailTableRef" :data="taskList" :border="true"
      :header-cell-class-name="headerCellClassName" :cell-class-name="cellClassName" @selection-change="handleSelectionTask">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column v-for="(value, index) in sonColumns" :label="value.name" :key="Math.random()"
        :prop="value.propName" :width="value.width">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row[value.propName]" placement="bottom" :open-delay="500">
            <span>{{ scope.row[value.propName] }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="category_id" label="类型" width="100px" :key="Math.random()">
        <template slot-scope="scope">
          <div>
            {{ FormatCategory(scope.row.category_id) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="map_id" label="地图" width="100px" :key="Math.random()">
      </el-table-column>
      <el-table-column prop="pnc_version" label="算法版本" width="200px" :key="Math.random()">
      </el-table-column>
      <el-table-column label="节点" width="100px" :key="Math.random()">
        <template slot-scope="scope">
          <span v-if="!scope.row.ext_workers">
            cloud
          </span>
          <span v-else> {{ scope.row.schedule_info }}</span>
        </template>
      </el-table-column>
      <!-- 任务状态-测试中 展示 -->
      <el-table-column v-if="isFinish === false" :key="Math.random()" prop="status" label="任务状态" width="100px">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.status === 'started'">
              测试中
              <i class="el-icon-loading" />
            </span>
            <span v-else>{{ FormatStatus(scope.row.status) }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 运行结果-已完成 展示 -->
      <el-table-column v-if="isFinish === true" :key="Math.random()" prop="status" label="运行结果" width="100px">
        <template slot-scope="scope">
          <div class="run-status" v-if="scope.row.status === 'ended'">
            <span v-if="scope.row.pass">
              <i class="iconfont icon-roundcheck" style="color:#00cb00"></i>
              成功
            </span>
            <span v-else>
              <i class="iconfont icon-roundclose" style="color:#ff1f1f"></i>
              失败
            </span>
          </div>
        </template>
      </el-table-column>
      <!-- 开始时间-已完成 展示 -->
      <template v-if="isFinish == true">
        <el-table-column label="开始时间" width="100px" :key="Math.random()">
          <template slot-scope="scope">
            <div>
              {{ scope.row.start_time.substring(11) }}
            </div>
          </template>
        </el-table-column>
      </template>
      <!-- 结束时间-已完成 展示 -->
      <template v-if="isFinish == true">
        <el-table-column label="结束时间" width="100px" :key="Math.random()">
          <template slot-scope="scope">
            <div>
              {{ scope.row.end_time.substring(11) }}
            </div>
          </template>
        </el-table-column>
      </template>
      <!-- 运行时间-已完成 展示 -->
      <el-table-column v-if="isFinish == true" :key="Math.random()" prop="time_cost" label="运行时间" width="100px">
      </el-table-column>
      <el-table-column :key="Math.random()" label="查看日志" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 'ended'" class="change-icon"
            @click="openLog(scope.row.task_id)">
            <i class="iconfont icon-form"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" :key="Math.random()">
        <template slot-scope="scope">
          <span class="operation-link" @click="retryTask(scope.row.task_id)">重测</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页--工具条 -- task-->
    <el-pagination background layout="total,sizes, prev, pager, next" :page-sizes="[20, 50, 100]" :page-size="20"
      :current-page.sync="taskPageIndex" :total="taskTotal" @size-change="handleSizeChangeTask"
      @current-change="handleCurrentChangeTask" />
  </div>
</template>
<script>
import { v4 as uuid } from "uuid"
import { categoryMap, taskStatus } from '@/business/const'
import { maptestSonColumns } from "../..//task-run/comonents/TaskColumns"
import { fetchTaskList, directRetryTask } from '@/api/task'
export default {
  name: 'AmapTable',
  data() {
    return {
      taskList: [],
      taskLoading: false,
      sonColumns: maptestSonColumns,
      taskPageIndex: 1,
      taskPageSize: 20,
      taskTotal: 0,
      selected_task_id_arr: []
    }
  },
  props: {
    session_id: {
      type: String,
      default: ''
    },
    isFinish: {
      type: Boolean,
      default: false
    },
    toSearch: {
      type: Boolean,
      default: false
    },
    filters: {
      type: Object,
      default: {
        task_id: '',
        pass: null
      }
    }
  },
  watch: {
    toSearch(newVal){
      if(newVal){
        this.getTask()
        this.$emit('resetToSearchFlag')
      }
    }
  },
  created() {
    this.getTask()
    this.$store.dispatch('taskDetail/setSelectedTaskArr', [])
  },
  methods: {
    cellClassName() {
      return 'body-cell-custom'
    },
    headerCellClassName() {
      return 'header-cell-custom'
    },
    FormatStatus(status) {
      return taskStatus[status]
    },
    FormatCategory(category_id) {
      const res = categoryMap.filter((item) => item.value === category_id)
      return res[0].text
    },
    //获取task 列表
    getTask() {
      const params = {
        session_id: this.session_id,      // session_id 
        page_num: this.taskPageIndex,     // 分页 页码
        page_size: this.taskPageSize,     // 分页 每页数量
        task_id: this.filters.task_id,    // 查询 task_id 
      }
      this.taskLoading = true
      fetchTaskList(params).then((res) => {
        if (res) {
          this.taskTotal = res.total
          if (res.data && res.data.length > 0) {
            let resTaskList = res.data.map(res => {
              let temp = res
              temp.row_key_id = uuid()
              return temp
            })
            this.taskList = resTaskList
          } else {
            this.taskList = []
          }

          // 需增加nextTick 来渲染表格数据
          this.$nextTick(() => {
            this.taskLoading = false
          })
        }
      })
    },
    // 切换pagesize -- task
    handleSizeChangeTask(val) {
      this.taskPageSize = val;
      this.getTask()
    },
    // 切换页码 -- task
    handleCurrentChangeTask(val) {
      this.taskPageIndex = val
      this.getTask()
    },
    // task 日志
    openLog(task_id) {
      this.$router.push({ name: 'TaskLog', params: { taskId: task_id } })
    },
    // 重测功能 接口未调
    retryTask(task_id) {
      let params = { task_id }
      directRetryTask(params).then(res => {
        if (res) {
          this.$message.success('开始重测！')
        }
      })
    },
    // 选择task
    handleSelectionTask(val) {
      this.selected_task_id_arr = val.map(item => {
        return item.task_id
      })
      this.$store.dispatch('taskDetail/setSelectedTaskArr', this.selected_task_id_arr)
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/vars.scss'; // 定义变量
.task-table {
  margin-top: 0;

  >.el-table {
    overflow: auto;
  }

  ::v-deep .el-table th.el-table__cell {
    background-color: rgb(248, 249, 250) !important;
  }
}

.change-icon {
  font-size: 20px;
  cursor: pointer;

  .iconfont {
    font-size: 20px !important;

    &:hover {
      color: $primary-hover-color;
    }
  }
}

.run-status {
  i {
    font-size: 20px;
    vertical-align: bottom;
  }

}

.operation-link {
  color: $primary-color;
  cursor: pointer;
}
</style>